<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- <link rel="stylesheet" href="E:\Web前端\week06\css\work01.css"> -->
  <link rel="stylesheet" href="work01.css">
  <script type="text/javascript" src="work01.js"></script>
  <script type="text/javascript" src="readfile.js"></script>
</head>

<body>
  <div class="container">
    <nav>
      <a href="#" id="tab1" onclick="changeTab(this)" class="selectTab">主页</a>
      <a href="#" id="tab2" onclick="changeTab(this)">日志</a>
      <a href="#" id="tab3" onclick="changeTab(this)">相册</a>
      <a href="#" id="tab4" onclick="changeTab(this)">留言板</a>
    </nav>
    <div class="title">
      <nav id="title1">
        全部
      </nav>
    </div>
    <p> 啥都没，请点击相册！</p>
    <div class="content">
      <div class="left">
        <ul>
          <li>
            <a href="#" onclick="changeText(this)">全部</a>
          </li>
        </ul>
      </div>
      <div class="main">
        <nav>
          <input type="button" id="but1" onclick="createList()" value="创建相册">
          <label for="but2">上传图片</label>
          <input type="file" id="but2" onchange="createReader(readImage)(event)">
        </nav>
        <div class="picture">
          <div id="1" class="picBox active">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
            <img src="5.jpg" alt="">
            <img src="6.jpg" alt="">
            <img src="7.jpg" alt="">
            <img src="8.jpg" alt="">
            <img src="9.jpg" alt="">
            <img src="10.jpg" alt="">
          </div>
          <div id="2" class="picBox">
            <img src="4.jpg" alt="">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="7.jpg" alt="">
          </div>
          <div id="3" class="picBox">

          </div>
          <div id="4" class="picBox">

          </div>
          <div id="5" class="picBox">

          </div>
          <div id="6" class="picBox">

          </div>
          <div id="7" class="picBox">

          </div>
          <div id="8" class="picBox">

          </div>
          <div id="9" class="picBox">

          </div>
          <div id="10" class="picBox">

          </div>
        </div>
        <div class="pages">
          <script type="text/javascript">
            function pages(sum, moreNum) {
              return Math.ceil(sum / moreNum);
            }

            const pagesDom = document.querySelector(".pages");
            let pageNum = pages(101, 10);
            for (let i = 0; i < pageNum; i++) {
              pagesDom.appendChild(createElement(`
                <a href="#">${i+1}</a>
                `));
            }

            var aList = document.querySelector(".pages").getElementsByTagName('a');
            for (var i = 0; i < aList.length; i++) {
              aList[0].classList.add("active");
              aList[i].addEventListener("click", function(event) {
                for (var j = 0; j < aList.length; j++) {
                  aList[j].classList.remove("active");
                  if (this == aList[j]) {
                    aList[j].classList.add("active");

                    var picBox = document.querySelectorAll(".picture > .picBox");
                    for (var k = 0; k < picBox.length; k++) {
                      picBox[k].classList.remove("active");
                    }
                    picBox[j].classList.add("active");
                  }
                }
              })
            }
          </script>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    function readImage(img) {
      var picDom = document.querySelector(".container > .content > .main > .picture > .active");
      while (picDom.getElementsByTagName("img").length == 10) {
        picDom = picDom.nextElementSibling;
      }
      picDom.appendChild(img);
    }
  </script>
</body>

</html>
